window.onload = function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
x0=20;y0=20;
hmax=500;
xmax=500;
endx=canvas.height-20;
endy=canvas.width-20;
dx=250;
drowface();
function drowface(){
ctx.beginPath();
ctx.strokeStyle='black';
ctx.strokeRect(x0,y0,xmax,hmax);
ctx.strokeStyle='blue';
ctx.lineWidth=2;
ctx.strokeText('0',x0-15,hmax+x0);
ctx.stroke();
}
// free fall
angle = 45;
var R=1;
var gravity = 9;  // m/ss
var elastic = null;

ctx.font = "14px Times-Roman";
function start(angle,speed,high)
{
//alert(angle+'-'+speed+'-'+high);
var cursor = null;
var w = canvas.width;
var rad = (angle*Math.PI)/180;
 vx = Math.cos(rad)*speed;
 vy = Math.sin(rad)*speed;
/* squarts
ctx.moveTo(i,y0);
ctx.lineTo(i,x0+hmax);
ctx.moveTo(y0,i);
ctx.lineTo(xmax+x0,i);
*/
var yhigh = 520 - high*5;
parabol = {x:20,y:yhigh};
tangentx=30;
first={x:parabol.x, y:parabol.y};
//parallel
masht=5;
lVekt=30;
ctx.moveTo(20,first.y);
ctx.lineTo(20+lVekt, first.y);
ctx.strokeStyle='DarkSlateGrey ';
ctx.strokeText("Vox",20+lVekt,first.y);
ctx.moveTo(20+lVekt-masht,first.y-masht);
ctx.lineTo(20+lVekt, first.y);
ctx.moveTo(20+lVekt-masht,first.y+masht);
ctx.lineTo(20+lVekt, first.y);
//normal
ctx.moveTo(20,yhigh);
xvekt=20+lVekt; yvekt=yhigh-lVekt*Math.tan((angle*Math.PI)/180)
ctx.lineTo(xvekt,yvekt);
mashtNorm=7;
ctx.lineTo(xvekt+mashtNorm*Math.cos(((angle+135)*Math.PI)/180),yvekt-mashtNorm*Math.sin(((angle+135)*Math.PI)/180));
ctx.moveTo(xvekt,yvekt);
ctx.lineTo(xvekt-mashtNorm*Math.cos(((angle+45)*Math.PI)/180),yvekt+mashtNorm*Math.sin(((angle+45)*Math.PI)/180));
//vertical
ctx.moveTo(20,first.y);
ctx.lineTo(20,yvekt);
ctx.strokeText("Vox",20,yvekt);
ctx.moveTo(20-masht,yvekt+masht);
ctx.lineTo(20,yvekt);
ctx.moveTo(20+masht,yvekt+masht);
ctx.lineTo(20,yvekt);
ctx.strokeStyle  = 'brown';
ctx.stroke();
close=true;
//drow parabol
//tid = setInterval(drowParabol, 0);

for(parabol.x=20;parabol.x<550; parabol.x+=0.1)
{
 first.x = parabol.x; first.y = parabol.y;
 parabol.y = (vy/vx)*(parabol.x-20) - (9,8/(2*vx*vx))*(parabol.x-20)*(parabol.x-20);
 parabol.y = yhigh - parabol.y;
 //parabol.x+=0.3;
//get max codinat
if(first.y<parabol.y && close==true){
//drow max vektor
lVekt=60;
ctx.lineTo(parabol.x+lVekt,parabol.y);
ctx.strokeStyle='DarkSlateGrey';
ctx.strokeText("V",parabol.x+lVekt,parabol.y);
ctx.strokeStyle='brown';
ctx.moveTo(parabol.x+lVekt-masht,parabol.y-masht);
ctx.lineTo(parabol.x+lVekt,parabol.y);
ctx.moveTo(parabol.x+lVekt-masht,parabol.y+masht);
ctx.lineTo(parabol.x+lVekt, parabol.y);
ctx.stroke();
close = false;
}; 
if(parabol.y > 520 || parabol.x > 550){ 

// drow flag
flag();
//finish vektors
lVekt=30;
//parallel
ctx.beginPath();
ctx.moveTo(first.x,first.y);
ctx.lineTo(first.x+lVekt, first.y);
ctx.strokeStyle='DarkSlateGrey';
ctx.strokeText("Vx",first.x+lVekt, first.y);
ctx.strokeStyle='brown';
ctx.moveTo(first.x+lVekt-masht,first.y-masht);
ctx.lineTo(first.x+lVekt, first.y);
ctx.moveTo(first.x+lVekt-masht,first.y+masht);
ctx.lineTo(first.x+lVekt, first.y);
//normal
ctx.moveTo(first.x,first.y);
xvekt=first.x+lVekt; yvekt=first.y-lVekt*Math.tan(((-angle)*Math.PI)/180);
ctx.lineTo(xvekt,yvekt);
mashtNorm=7;
ctx.lineTo(xvekt+mashtNorm*Math.cos(((angle+225)*Math.PI)/180),yvekt+mashtNorm*Math.sin(((angle+225)*Math.PI)/180));ctx.stroke();
ctx.moveTo(xvekt,yvekt);
ctx.lineTo(xvekt+mashtNorm*Math.cos(((angle+135)*Math.PI)/180),yvekt+mashtNorm*Math.sin(((angle+135)*Math.PI)/180));
//vertical
ctx.moveTo(first.x,first.y);
ctx.lineTo(first.x,yvekt);
ctx.strokeStyle='DarkSlateGrey';
ctx.strokeText("Vy",first.x,yvekt+12);
ctx.strokeStyle='brown';
ctx.moveTo(first.x-masht,yvekt-masht);
ctx.lineTo(first.x,yvekt);
ctx.moveTo(first.x+masht,yvekt-masht);
ctx.lineTo(first.x,yvekt);
ctx.stroke();

}   

ctx.beginPath();
ctx.arc(parabol.x,parabol.y,.5,0,2*Math.PI);
ctx.fill();

//tangent
/*
if(parabol.x>tangentx){
tangentx+=30; 
ctx.moveTo(first.x,first.y);
var l = Math.sqrt((parabol.x-first.x)*(parabol.x-first.x)+(parabol.y-first.y)*(parabol.y-first.y));
ctx.lineTo(first.x+15*(parabol.x-first.x)/l,first.y+15*(parabol.y-first.y)/l);
ctx.lineTo(first.x+12*(parabol.x-first.x)/l-1*(parabol.y-first.y)/l,first.y+12*(parabol.y-first.y)/l+1*(parabol.x-first.x)/l);
ctx.moveTo(first.x+15*(parabol.x-first.x)/l,                      first.y+15*(parabol.y-first.y)/l                      );
ctx.lineTo(first.x+12*(parabol.x-first.x)/l+1*(parabol.y-first.y)/l,first.y+12*(parabol.y-first.y)/l-1*(parabol.x-first.x)/l);
ctx.stroke();
}
*/
ctx.closePath();
}
}

function flag(){
ctx.fillStyle   = 'red';
ctx.strokeStyle = 'blue';
ctx.moveTo(parabol.x,parabol.y);
ctx.lineTo(parabol.x, parabol.y-40);
ctx.lineTo(parabol.x+20, parabol.y-30);
ctx.lineTo(parabol.x, parabol.y-20);
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.strokeStyle='brown';
ctx.fillStyle   = 'black';
}


function showresult(){
showdiv = document.getElementById("showdiv");
showdiv.style.display = "block";
var x0_show = document.getElementById("x0");
 x0_show.innerHTML='0';
var y0_show = document.getElementById("y0");
 y0_show.innerHTML=hRange.slider("value");
var v0x_show = document.getElementById("v0x");
 v0x_show.innerHTML=vx;
var v0y_show = document.getElementById("v0y");
 v0y_show.innerHTML=vy;
var vx_show = document.getElementById("vx");
 vx_show.innerHTML=-vx;
var vy_show = document.getElementById("vy");
 vy_show.innerHTML=vy;
var y = document.getElementById("y");
y.innerHTML=0;
var t = 2*vx/9.8; 
var s = vx*t ;
var x= document.getElementById("x");
 x.innerHTML=s; 
var tfall= document.getElementById("tfall");
 tfall.innerHTML=t;
 

}
button=document.getElementById("button");
button.addEventListener("click", function(){start(cRange.slider("value"),sRange.slider("value"),hRange.slider("value"));
showresult(); }, false);
cleen=document.getElementById("cleen");
cleen.addEventListener("click", function(){
clearTimeout(tid);
ctx.clearRect(0,0,canvas.width,canvas.height);
drowface();
/*

ctx.beginPath();
clearTimeout(tid);
ctx.strokeStyle='black';
ctx.strokeRect(x0,y0,xmax,hmax);
dx=250;
ctx.lineWidth=2;
ctx.strokeStyle='blue';
ctx.strokeText('0',x0-15,hmax+x0);
ctx.stroke();
*/
}, false);
}